<template>
  <div
    class="chat-container"
    v-loading="loading"
    element-loading-text="努力加载中..."
    :element-loading-svg="svg"
    element-loading-background="rgba(122, 122, 122, 0.8)"
  >
    <div class="forBody">
      <el-scrollbar ref="scrollbarRef">
        <div
          class="item"
          v-for="(item, index) in questionList"
          :key="index"
          :class="item.role === 'user' ? 'itemuser' : 'itemassistant'"
        >
          <div :class="item.role === 'user' ? 'avtUser' : 'avtassistant'">
            <svg-icon
              :name="item.role === 'user' ? 'avtuser' : 'assistant'"
              width="40px"
              height="40px"
            ></svg-icon>
          </div>
          <div class="for_content">
            <div>{{ item.content }}</div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div class="forBorder">
      <el-input
        v-model="question"
        size="large"
        :suffix-icon="Promotion"
        type="text"
        placeholder="请输入..."
        @change="handleChange"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, nextTick } from "vue";
import { Promotion } from "@element-plus/icons-vue";
import { reqChat } from "@/api/user/translate";
import { ElMessage } from "element-plus";
const question = ref("");
const questionList: any = ref([] as any);
const scrollbarRef = ref();
const loading = ref(false);
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;
const handleChange = async () => {
  loading.value = true;
  if (question.value) {
    const questions = JSON.parse(JSON.stringify(question.value));
    questionList.value.push({ role: "user", content: questions });
    question.value = "";
    scrollToBottom();
    const res: any = await reqChat({ messages: questionList.value });
    if (res.code === 200) {
      const parse = JSON.parse(res.data);
      questionList.value.push({ role: "assistant", content: parse.result });
      scrollToBottom();
      loading.value = false;
    }
  } else {
    ElMessage({
      message: "内容不能为空！",
      type: "error",
    });
    loading.value = false;
  }
};

const scrollToBottom = () => {
  nextTick(() => {
    if (scrollbarRef.value) {
      scrollbarRef.value.scrollTo(0, scrollbarRef.value.$el.scrollHeight);
    }
  });
};
</script>
<style lang="scss" scoped>
.chat-container {
  flex: 1 1;
  overflow: auto;
  padding: 12px 24px;
  display: flex;
  flex-direction: column;
  background: #fff;
  background-image: url(../../assets/images/msgBoxBg.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;

  .forBody {
    flex: 1 1;
    overflow: auto;
    height: calc(100vh - 50px);
    background-image: url(../../assets/images/bgGif.gif);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5px;
    background-position: center;

    .itemuser {
      display: flex;
      align-items: flex-start;
      position: relative;
      flex-direction: row-reverse;
      margin: 16px 0 50px;

      .for_content {
        font-weight: 600;
        margin-left: 14px;
        position: relative;
        max-width: 70%;
        margin-right: 10px;
        background: #d9e5fc;
        border-radius: 6px;
        padding: 16px;
        box-sizing: border-box;
        font-size: 14px;
        color: #151b26;
        letter-spacing: 0;
      }
    }

    .itemassistant {
      display: flex;
      align-items: flex-start;
      position: relative;
      margin: 16px 0 50px;

      .for_content {
        border-radius: 12px;
        background: #f2f2f2;
        max-width: 80%;
        white-space: pre-line;
        position: relative;
        background: #fff;
        box-shadow: 0 2px 8px 0 rgba(7, 12, 20, 0.04);
        border-radius: 6px;
        padding: 16px;
        box-sizing: border-box;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #151b26;
        letter-spacing: 0;
        font-weight: 400;
        margin-left: 10px;
      }
    }

    .assistant {
      white-space: normal;
      word-break: break-all;
    }
  }

  .forBorder {
    padding: 2px;
    background-image: linear-gradient(
      90deg,
      #4ce582,
      #2468f2,
      #2468f2,
      #ec5d3e
    );
    border-radius: 8px;
    box-sizing: border-box;
    margin: 10px 0px 30px;
  }
}
</style>
